import axios from 'axios'
import React, { useState, useEffect } from 'react'
import style from "./MyBook.module.css"
import Book from './MyBookComponent/Book'
import Comment from './MyBookComponent/Comment'
export default function MyBook() {
  let [flag, changeFlag] = useState(true)
  let [book, changeBook] = useState('current')
  let [comment, changeComment] = useState(null)
  let [bookData, changeBookData] = useState()
  let [username, changeUsername] = useState('')
  let [commentData,changeCommentData]=useState()
  let [userData,changeUserData]=useState()
  useEffect(() => {
    async function fetchData() {
      let res = await axios.get('/myBook')
      let res2 = await axios.get('/personal')
      changeUsername(res2.data.res_personal[0].username)
      changeUserData(res2.data.res_personal[0])
      if (res.data.code == 204) {
        changeBookData(res.data.bookData)
      } else {
        console.log(res.data.info);
      }
      let res3 = await axios.get('/myComment')
      changeCommentData(res3.data.commentData[0])
    }
    fetchData()
  }, [])
  return (
    <div>
      <div className={style.container}>
        <div className={style.userTitle}>
          <div>{username}</div>
        </div>
        <div className={style.bigBox}>
          <div className={style.switch}>
            <div className={style[book]} onClick={() => { changeFlag(true); changeBook('current'); changeComment(null) }}>追书</div>
            <div className={style[comment]} onClick={() => { changeFlag(false); changeBook(null); changeComment('current') }}>评论</div>
          </div>
          <div className={style.content}>
            {
              flag ? <Book bookData={bookData} ></Book> : <Comment userData={userData} commentData={commentData}></Comment>
            }
          </div>
        </div>
      </div>
    </div>
  )
}
